<template>
    <div id="expenseCalendar" class="same-change-oldstyle">
        <div class="same-head-box">
            <div class="saem-seat-box">
                <div class="saem-seat-left">
                    <span>当前位置：</span>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/userlist' }">用户列表</el-breadcrumb-item>
                        <el-breadcrumb-item>水卡列表</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="saem-seat-right">
                    <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
                    <button class="same-search-btns" @click="returnBack">返回</button>
                </div>
            </div>
            <div class="same-search-box">
                <div class="same-search-left">
                    <div class="same-left-one">
                        <span class="same-search-span">卡号:</span>
                        <el-input size="medium" type="text" placeholder="请输入卡号" style="width: 160px;"
                            v-model="virtualCard"></el-input>
                    </div>
                    <div class="same-left-one">

                        <el-button type="primary" size="medium" @click="search()">搜索</el-button>
                        <el-button type="info" size="medium" @click="reset()">重置</el-button>
                    </div>
                </div>
                <div class="same-search-right"></div>
            </div>
        </div>
        <div class="same-table-box">
            <div class="table_box">


                <div class="common-table-outer">
                    <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
                        :data="tableData" stripe>
                        <el-table-column align="center" label="卡类型">
                            <template slot-scope="scope">
                                <span class="redColor greed_show" v-if="scope.row.is_real_card == 1">电子卡</span>
                                <span class="redColor" v-if="scope.row.is_real_card == 2">实体卡</span>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="余额">
                            <template slot-scope="scope">
                                {{ scope.row.balance|filterNumber }}
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="水卡卡号">
                            <template slot-scope="scope">
                                {{ scope.row.card || '——'}}
                            </template>
                        </el-table-column>

                        <template slot="empty" v-if="isLoad">
                            <div class="new-no-data-show">
                                <img src="../../assets/images/no-data.png" alt="">
                                <div>暂无相关数据</div>
                            </div>
                        </template>
                    </el-table>

                    <div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
                        <!--//  分页-->
                        <el-pagination background class="pull-right clearfix" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" :current-page.sync="pageNo"
                            :page-sizes="pageSizesList" :page-size="pageSize"
                            layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
                        </el-pagination>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: 'expenseCalendar',
        data: function () {
            return {
                pageNo: 1,
                pageSize: 15,
                pageSizesList: [15, 30, 40, 50],
                tableData: [], //返回的结果集合
                totalDataNumber: 0, //数据的总数,

                time: '',
                address: [],
                selected: [
                    {
                        value: '0',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '已支付'
                    },
                    {
                        value: '2',
                        label: '未支付'
                    },
                    {
                        value: '3',
                        label: '已退款'
                    }
                ],
                value: '',
                user_id: '', // 用户ID
                loading: true, // 加载动画
                isLoad: false, //是否请求接口
                start_time: '', // 搜索开始时间
                end_time: '', // 搜索结束时间
                type: '', // 操作类型
                virtualCard: ''   //搜索水卡卡号

            };
        },
        // 初始化执行方法
        created: function () {
            var that = this;
            var virtualCard = that.virtualCard; // 卡号
            var pageSize = that.pageSize; // 每页显示条数
            var page = that.pageNo; // 当前页
            that.user_id = this.$route.query.user_id; // 接收水卡ID
            that.waterPurchaseHistory(page, pageSize, virtualCard); // 获取水卡信息
        },
        inject: [
            'reload'
        ],
        methods: {
            RefreshFun() {
                // 调用reload方法，刷新整个页面
                this.reload()
            },
            //返回
            returnBack() {
                this.$router.back(-1);
            },
            reset() {
                this.virtualCard = '';
                this.type = '';
                this.pageNo = 1;
                this.waterPurchaseHistory(this.pageNo, this.pageSize, this.virtualCard);
            },
            // 分页
            handleSizeChange(val) {
                var that = this;
                that.pageNo = 1;
                that.pageSize = val; // 当前每页显示条数
                that.waterPurchaseHistory(that.pageNo, val, that.virtualCard); // 获取
            },
            // 当前页
            handleCurrentChange(val) {
                var that = this;
                var pageSize = that.pageSize; // 每页条数
                that.pageNo = val;
                that.waterPurchaseHistory(val, pageSize); // 获取水卡消费记录
            },
            // 获取水卡消费记录
            waterPurchaseHistory: function (page, pageSize, virtualCard) {
                this.loading = true; //打开loading动画
                this.isLoad = false;
                var that = this;
                that.$post({
                    url: 'Partner/Users/userCard',
                    data: {
                        user_id: that.user_id, page: page, row: pageSize,
                        card_number: virtualCard ? virtualCard : '',
                    },
                    success: data => {
                        this.loading = false; //关闭动画
                        this.isLoad = true;
                        that.tableData = []; // 清空数据
                        if (data.code == 1000) {
                            $.each(data.data.list, function () {
                                that.tableData.push(this);
                            });
                            that.totalDataNumber = data.data.count; // 总的数据
                        } else {
                            //alert('请求失败或无数据');
                            /*this.$message({
                                type: 'error',
                                showClose: true,
                                message: '请求失败或无数据',
                                center: true
                            });*/
                        }
                    }
                });
            },
            // 搜索
            search: function () {
                var that = this;
                that.pageNo = 1; // 当前页
                var virtualCard = that.virtualCard;
                var pageSize = that.pageSize; // 每页条数
                that.waterPurchaseHistory(that.pageNo, pageSize, virtualCard); // 获取水卡消费记录
            }
        },
        mounted() { },
        watch: {}
    };
</script>

<style>
    #expenseCalendar {
        width: 100%;
        height: 100%;
        background: #ffffff;
    }
</style>